<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>表单控件</title>
<link rel="stylesheet" href="../../Content/css/bootstrap.min.css" />
<link rel="stylesheet" href="../../Content/css/font-awesome.min.css" />
<link rel="stylesheet" href="../../Content/css/mycss.css" />
</head>

<body >
<div class="container-fluid">
    <h3>文本框</h3>
    <div class="row">
        <div class="col-md-3">
            <input type="text" class="form-control" placeholder="我是文本框"  />
        </div>
        <div class="col-md-3">
         
            <input type="text" class="form-control" placeholder="我是只读文本框" disabled />
        </div>
    </div>
    <h3>Code</h3>
    <div>
        <pre>
            <code>
                &lt;div class="col-md-3"&gt;
                    &lt;!--placeholder 是一个占位符，里面内容可根据实际情况填写，可以为空.--&gt;
                    &lt;input type="text" class="form-control" placeholder="我是文本框" /&gt;
                &lt;/div&gt;
                
                
                &lt;div class="col-md-3"&gt;
                    &lt;!--如果要禁用控件可以为控件添加 disabled 属性--&gt;
                    &lt;input type="text" class="form-control" placeholder="我是只读文本框" disabled /&gt;
                &lt;/div&gt;
            </code>
        </pre>
    </div>
    <hr />
    <h3>组合文本框</h3>
    
    <div class="input-group col-md-3">
      <input class="form-control" placeholder="">
      <div class="input-group-addon">万</div>
    </div>
    
    <h3>Code</h3>
    <div>
        <pre>
            <code>
                &lt;div class="input-group col-md-3"&gt;
                  &lt;!--与普通文本框属性相同--&gt;
                  &lt;input class="form-control"  placeholder=""&gt;
                  &lt;!--与文本框的组合单位，内容根据实际情况而定，可放在文本框之前--&gt;
                  &lt;div class="input-group-addon"&gt;万&lt;/div&gt;
                &lt;/div&gt;
            </code>
        </pre>
    </div>
    
    <hr />
    <h3>下拉框</h3>
    <div class="row">
        <div class="col-md-3">
            <select class="form-control">
              <option>1</option>
              <option>2</option>
              <option>3</option>
              <option>4</option>
              <option>5</option>
            </select>
        </div>
    </div>
    <h3>Code</h3>
    <div>
    	<pre>
        	<code>
            	&lt;!--与普通的下拉框没什么区别，就是在普通的下拉框是加上下面红色部分的内容--&gt;
            	&lt;select <font color="red">class="form-control"</font> &gt;
                  &lt;option&gt;1&lt;/option&gt;
                  &lt;option&gt;2&lt;/option&gt;
                  &lt;option&gt;3&lt;/option&gt;
                  &lt;option&gt;4&lt;/option&gt;
                  &lt;option&gt;5&lt;/option&gt;
                &lt;/select&gt;
            </code>
        </pre>
    </div>
</div>

</body>
</html>
